<template>
  <div class="login_box" @click="blurInput">
    <div class="close" @click="close">
      <img
        src="../assets/font/close.svg"
        alt=""
        @click="this.$router.push('/home/homeindex')"
      />
    </div>
    <div class="title">MINI.cn</div>
    <div :class="{ inp_box: true, active: isActive == 1 }">
      <input
        @click="isActive = 1"
        type="text"
        placeholder="手机号"
        v-model="phoneNum"
      />
    </div>
    <div class="inp_box inp_box2" :class="{ active: isActive == 2 }">
      <input
        @click="isActive = 2"
        type="text"
        placeholder="验证码"
        v-model="identify"
      /><button @click="sendCode" class="inp_btn">{{ str }}</button>
    </div>
    <button class="login_btn" @click="userLogin">登录</button>
    <div class="social">
      <div class="social_header">社交账号登录</div>
      <div class="social_icon">
        <img src="../assets/font/u262.svg" class="icon_item" />
        <img src="../assets/font/u263.svg" class="icon_item" />
        <img src="../assets/font/u264.svg" class="icon_item" />
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../api/product"

export default {
  name: 'loginView',
  data () {
    return {
      str: '发送验证码',
      num: 60,
      isActive: 1,
      //   手机号
      phoneNum: '',
      identify: '',
      timer: null
    }
  },
  methods: {
    //   判断手机号  @blur="judge"
    // judge () {
    //   var re = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    //   if (re.test(this.phoneNum)) { console.log(1) }
    // },

    // 点击登录
    async userLogin () {
      // 动态 传入参数
      const res = await login(this.phoneNum, 'abc123')
      if (this.phoneNum == res.data.result.phone) {
        localStorage.setItem("token", res.data.result.token)
        this.$router.push("/home/homeindex")
      } else {
        console.log(2);
      }

      // $route获取信息 判断是否存在.query.redirect，不存在跳主页
      const redirect = this.$route.query.redirect
      this.$router.push(redirect || '/home')

    },
    close () {
      console.log('关闭功能待续')
    },
    // 发送验证码(小庄回顾)
    sendCode () {
      if (this.timer) return //false执行定时器，true退出（按钮初始状态）

      this.timer = setInterval(() => {
        this.str = this.num-- + 's'
        if (this.num == 0) {
          this.str = '发送验证码'
          this.num = 60
          clearInterval(this.timer)
          //  初始定时器状态
          this.timer = null
        }
      }, 1000)
      //   点击登录

    },
    // 取消输入框的选中状态
    blurInput (e) {
      if (e.target.tagName !== 'INPUT') {
        this.isActive = 0
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.login_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: url(../assets/images/login_bg.png);
  background-size: 100% 100%;
}
.close {
  width: 7.467vw;
  height: 7.467vw;
  position: absolute;
  top: 5.333vw;
  right: 5.333vw;
}
.title {
  width: 78vw;
  color: #fff;
  font-size: 9vw;
  font-weight: 700;
  margin: 18.667vw 0 2.667vw 0;
}

input {
  width: 50vw;
  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  background-color: transparent;
  color: #fff;
  padding-left: 3vw;
  font-size: 3.2vw;
}
input::placeholder {
  font-size: 3.2vw;
  color: #fff;
}
span {
  color: #fff;
}

.inp_box {
  display: flex;
  align-items: flex-end;
  width: 78vw;
  height: 10vw;
  padding-bottom: 1.6vw;
  border-bottom: 0.267vw solid #fff;
}

.inp_box2 {
  margin-top: 4.267vw;
  justify-content: space-between;
}

.inp_btn {
  background-color: transparent;
  border: 0;
  color: #fff;
  font-size: 3.2vw;
}

.login_btn {
  border: 0;
  width: 78vw;
  height: 13.333vw;
  border-radius: 6.667vw;
  color: #fff;
  background-color: #c1ab96;
  margin: 16vw 0 34.667vw 0;
}

.social_header {
  position: relative;
  font-size: 3.733vw;
  color: #c1ab96;
  text-align: center;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 42.667vw;
    width: 20.267vw;
    height: 0.133vw;
    background-color: #fff;
  }
  &::after {
    left: 42.667vw;
  }
}
.social_icon {
  margin-top: 5.333vw;
  width: 58vw;
  display: flex;
  justify-content: space-between;
  .icon_item {
    width: 6.933vw;
    height: 6.933vw;
  }
}
// 输入框选中的样式
.active {
  border-color: #c1ab96;
}
</style>